<template>
	<div class="sharePoster">
		<uni-popup ref="popup" :custom="true"
			type="center"
			maxHeight="100vh"
			class="shareother" :class="{'shareother_card' : type == 5}">
			<div class="share_wrap" :class="{'businessCard' : type == 5}">
				<div class="share_img">
					<image :src="sharePosterImg" mode="widthFix" alt></image>
				</div>
				<div class="btn-wrap">
					<div class="prompt-text">
						<span>可长按名片，选择“</span>
						<span class="underline">保存图片</span><span>”或“</span>
						<span class="underline">发送给朋友</span><span>”</span>
					</div>
					<div class="prompt-img">
						<image src="https://wximg.meijiabang.com/hkds/miniapp/images/design/Indication.png" mode="widthFix" alt></image>
					</div>
				</div>
			</div>
		</uni-popup>
	</div>
</template>

<script>
import { getShareImgCom } from '@/api/system'
import uniPopup from '@/components/uni-popup/uni-popup'
import { getSpreadIndex } from '@/utils/common'
export default {
	name: 'SharePoster',
	components: {
		uniPopup
	},
	props: {
		// type == 1 为用户获客，type == 2 为案例， type == 3 为攻略， type == 4 为工艺， type == 5 为名片， type == 6 为邀请开店， type == 7 为活动
		// type == 8 为建材商获客, type == 10 为一键获客海报分享
		type: {
			type: Number,
			default: 1
		},
		ownerUserId: [String, Number]

	},
	data() {
		return {
			shareMask: false,
			sharePosterImg: ''
		}
	},
	mounted() {},
	methods: {
		/** *
         * 显示海报通用方法
         * type 为 显示的哪种海报
         * val 表示需要外部的自定义参数时 传入
         * update 为 true 时刷新当前的已经获取的值
         */
		showMask(val, update) {
			uni.showLoading({
  				title: '',
  				mask: true
  			})
			if (this.sharePosterImg && !update) {
				// #ifdef H5
				this.$refs.popup.open()
				// #endif
				// #ifndef H5
				this.saveImg(this.sharePosterImg)
				// #endif
				uni.hideLoading()

				return this.getShareImgComData
			}
			this.sharePosterImg = ''
			// const localUrl = location.href
			// const localUrl = this.$constant.formal
			const type = this.type
			const userInfo = this.$store.state.user.basicUser ? this.$store.state.user.basicUser : this.$store.state.user.user

			let _spliceUrl = ''
			let _startUrl = ''
			let _endUrl = '?owner_user_id=' + userInfo.user_id + '&f=poster'
			// #ifdef H5
			_spliceUrl = userInfo.role_id == 3 ? 'person' : userInfo.role_id == 2 ? 'material' : 'company'
			_startUrl = this.$constant.formal + '/hkds/#/' + _spliceUrl
			// #endif
			let data = {}
			if (type == 1) {
				const changeUrl = getSpreadIndex() + _endUrl
				data = {
					url: changeUrl,
					user_id: userInfo.user_id
				}
			}
			if (type == 2) {
				data = {
					case_id: val.id,
					relevance_id: val.relevance_id
				}
				if (val.url) {
					data.url = _startUrl + '/pages/case/casedetail' + _endUrl + '&gobackt=normal&mainId=null&caseid=undefined_id' + (this.$util.isEmpty(val.urlString) ? '' : val.urlString)
				} else {
					// data.url = localUrl + '&f=poster'
					data.url = _startUrl + '/pages/case/casedetail' + _endUrl + '&gobackt=normal&mainId=null&caseid=undefined_id'
				}
			}
			if (type == 3) {
				data = {
					article_id: val.id,
					relevance_id: val.relevance_id
				}
				if (val.url) {
					data.url = _startUrl + '/pages/getGuest/articledetail' + _endUrl + '&gobackt=normal&mainId=null&articleid=undefined_id' + (this.$util.isEmpty(val.urlString) ? '' : val.urlString)
				} else {
					// data.url = localUrl + '&f=poster'
					data.url = _startUrl + '/pages/getGuest/articledetail' + _endUrl + '&gobackt=normal&mainId=null&articleid=undefined_id'
				}
			}
			if (type == 4) {
				data = {
					article_id: val.id,
					relevance_id: val.relevance_id
				}
				if (val.url) {
					data.url = _startUrl + '/pages/getGuest/articledetail' + _endUrl + '&gobackt=normal&mainId=null&articleid=undefined_id'
				} else {
					// data.url = localUrl + '&f=poster'
					data.url = _startUrl + '/pages/getGuest/articledetail' + _endUrl + '&gobackt=normal&mainId=null&articleid=undefined_id'
				}
			}
			if (type == 5) {
				// const role_type = userInfo.role_id == 1 || userInfo.role_id == 1 ? 'company' : 'person'
				data = {
					// url: localUrl + '&f=poster',
					url: getSpreadIndex() + _endUrl,
					user_id: userInfo.user_id
				}
			}
			if (type == 6) {
				const userData = this.$store.state.user.user
				data = {
					// #ifdef H5
					url: userData.invite_register_hkds_url,
					// #endif
					// #ifndef H5
					url: '/pages/page/login/index' + _endUrl + '&share_user_id=' + this.$store.state.user.user.user_id,
					// #endif
					user_id: userInfo.user_id
				}
			}
			if (type == 7) {
				data = {
					// url: localUrl + '&f=poster',
					url: _startUrl + '/pages/pagesHome/promotion/detail' + _endUrl + '&promotion_id=' + val,
					promotion_id: val
				}
			}
			if (type == 8) {
				data = {
					url: getSpreadIndex() + _endUrl,
					user_id: userInfo.user_id
				}
			}
			if (type == 10) {
				data = {
					url: getSpreadIndex() + _endUrl,
					work_id: val.work_id,
					poster_id: val.id || val
				}
			}
			console.log(type, data)
			// 请求
			return new Promise((resolve, reject) => {
				getShareImgCom(type, data).then(res => {
					if (res.status === 'success') {
						// #ifdef H5
						this.$refs.popup.open()
						this.sharePosterImg = res.data.poster_url
						// #endif
						// #ifndef H5
						// this.$refs.popup.open()
						// this.saveImg(res.data.poster_url)
						this.previewImage(res.data.poster_url)
						// #endif
						this.getShareImgComData = res.data
						resolve(res.data)
					} else {
						this.$toast(res.errors.message)
						reject(res.errors.message)
					}
					uni.hideLoading()
				})
			})
		},
		previewImage(path) {
			let arr = []
			arr[0] = path
			uni.previewImage({
				current: path,
				urls: arr
			})
		},
		saveImg(path) {
			uni.getImageInfo({
				src: path,
				success: imgInfo => {
					uni.saveImageToPhotosAlbum({
						filePath: imgInfo.path,
						success: () => {
							uni.showToast({
								title: '已保存到相册',
								icon: 'success'
							})
						},
						fail: () => {
							uni.showToast({
								title: '保存失败',
								icon: 'none'
							})
						}
					})
				},
				fail: (e) => {
					uni.showToast({
						title: '保存失败',
						icon: 'none'
					})
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">

.sharePoster {
    // 名片样式
    .shareother_card {
        // width: 90% !important;
        .businessCard {
            .share_img {
                border-radius: 20px;
                image {
                    border-radius: 20px;
                }
            }
        }
    }
    .shareother {
        // width: 74%;
        background-color: transparent;
    }
    .share_wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 auto;
        .share_img {
            width: 100%;
            image {
                width: 100%;
            }
        }

        .btn-wrap {
			width: 74%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            color: #fff;
            // padding: 0 90px 0 60px;
			margin-top: 20px;
			text-align: center;
            .prompt-text {
                line-height: 50px;
                .underline {
                    // border-bottom: 1px solid #fff;
                }
            }
            .prompt-img {
                width: 130px;
                margin-left: 20px;
                image {
					width: 100%;
                }
            }
        }
    }
}
</style>
